<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false">
        <view class="popup-content">
            <view class="title">注意事項</view>
            <scroll-view scroll-y="true" class="scroll-Y">
                注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項注意事項
            </scroll-view>
            <view class="checkbox">
                <checkbox-group @change="isChange">
                    <view class="" style="margin-bottom: 20rpx;">
                        <checkbox style="transform: scale(0.7);" color="#00be5f" :checked="agrees[0]" value="0" />我已閱讀並同意<text @tap="go_agree(3)">網絡服務協議</text>和<text @tap="go_agree(4)">隱私政策</text>
                    </view>
                    <view class="" style="margin-bottom: 20rpx;">
                        <checkbox style="transform: scale(0.7);" color="#00be5f" :checked="agrees[1]" value="1" />我已閱讀並同意<text @tap="go_agree(2)">购买祝播客注意事项</text>
                    </view>
                    <view class="" style="margin-bottom: 20rpx;">
                        <checkbox style="transform: scale(0.7);" color="#00be5f" :checked="agrees[2]" value="2" />我已閱讀並同意<text @tap="go_agree(12)">60岁以上人士购买须知</text>
                    </view>
                </checkbox-group>
            </view>
            <view class="buttom font-32" @tap="confirm">确认</view>
        </view>
    </uni-popup>
</template>

<script>
    export default {
        name: "login-modal",
        data() {
            return {
                agrees: [false, false, false]
            };
        },
        methods: {
            isChange(e) {
                let data = e.detail.value
                this.agrees = this.agrees.map(item => false)
                data.forEach((x) => {
                    this.agrees[x] = true
                })
            },
            go_agree(type) {
                this.$http('get|api/Article/regulation', {
                    id: type
                }).then(res => {
                    uni.navigateTo({
                        url: '/pages/agreement?type=' + type + '&title=' + res.result.topic_title
                    })
                })
            },
            confirm() {
                let isAgree = this.agrees.find(x => x === false)
                if (isAgree !== false) {
                    // this.$refs.popup.close()
                    this.$emit('confirm')
                } else {
                    this.$toastApp('請先閱讀並同意協議、事项、须知', 'none');
                }
            },
            open() {
                this.$refs.popup.open('center')
            },
            close() {
                this.$refs.popup.close()
            }
        }
    }
</script>

<style lang="scss">
    .popup-content {
        padding: 40rpx;
        border-radius: 20rpx;
        background-color: #FFFFFF;

        .title {
            text-align: center;
        }

        .checkbox {
            font-size: 24rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #a7aab3;
            line-height: 32rpx;
            margin-top: 26rpx;

            radio {
                transform: scale(0.7);
                vertical-align: middle;
            }

            text {
                color: #ff5a3c;
                text-decoration: underline;
            }
        }
        .scroll-Y{
            height: 360rpx;
            width: 580rpx;
            // padding: 20rpx;
            padding: 10rpx 20rpx;
            font-size: 24rpx;
            border: 1px #f5f5f5 solid;
        }
        .buttom {
            // width: 630rpx;
            height: 80rpx;
            // background: rgba(78, 110, 243, 1);
            background-color: var(--theme);
            border-radius: 45rpx;
            text-align: center;
            line-height: 80rpx;
            margin: 0 auto;
            margin-top: 40rpx;
            color: #ffffff;
        }
    }
</style>
